<script setup>
import { reactive, onMounted, ref, computed } from 'vue';
import { modifyUserInfo } from '@/server/api/biz.js';
import { ElMessage } from 'element-plus';
import { getUserInfo } from '@/server/api/auth.js';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();

const form = reactive({
  name: '',
  nation: '',
  phone: '',
  email: '',
  companyName: '',
});

const actionUrl = ref(
  import.meta.env.VITE_APP_BASE_API + '/mall-api/biz/crmCustomerFile/uploadImage',
);
const token = ref(JSON.parse(localStorage.getItem('loginIfo'))?.accessToken || '');
const industry = computed(() => [
  { id: 1, name: t('om.ConsumerElectronics') },
  { id: 2, name: t('om.Telecommunicate') },
  { id: 3, name: t('om.Aerospace') },
  { id: 4, name: t('om.MedicalCare') },
]);
const value = ref('');
const props = defineProps({
  userInfo: {
    type: Object,
    default: () => {},
  },
  getUserInfoData: {
    type: Function,
    default: () => {},
  },
});

// 用户头像
const avatar = computed(() => {
  return `${import.meta.env.VITE_APP_FILE_DOWNLOAD_API}/${form.avatar}`;
});

const onSubmit = () => {
  const obj = {
    avatar: form.avatar,
    crmCustomerBO: {
      address: form.nation,
      nation: form.nation,
      customerId: props.userInfo.crmCustomerVO.customerId,
      customerName: form.companyName,
      detailAddress: props.userInfo.crmCustomerVO.detailAddress,
      email: form.email,
      industry: value.value,
      lat: props.userInfo.crmCustomerVO.lat,
      lng: props.userInfo.crmCustomerVO.lng,
      location: props.userInfo.crmCustomerVO.location,
      mobile: form.mobile,
      telephone: props.userInfo.crmCustomerVO.telephone,
      website: props.userInfo.crmCustomerVO.website,
    },
    gender: props.userInfo.gender,
    id: props.userInfo.id,
    phone: form.mobile,
    nickName: form.name,
    userName: props.userInfo.userName,
  };
  console.log('obj', obj);
  modifyUserInfo(obj).then((res) => {
    if (res.code === 200) {
      ElMessage({
        message: '保存成功',
        type: 'success',
      });
      props.getUserInfoData();
    } else {
      ElMessage({
        message: res.msg,
        type: 'error',
      });
    }
  });
};

/**
 * 重新组织数据
 */
const reorganizeData = (userInfos) => {
  if (userInfos) {
    form.email = userInfos?.email || '';
    form.name = userInfos?.nickName || '';
    form.telephone = userInfos?.crmCustomerVO?.telephone || '';
    form.nation = userInfos?.crmCustomerVO?.address || '';
    form.companyName = userInfos?.crmCustomerVO?.customerName || '';
    form.avatar = userInfos?.avatar || '';
    form.mobile = userInfos?.crmCustomerVO?.mobile || '';
    value.value = userInfos?.crmCustomerVO?.industry || '';
  }
};

/**
 * 获取用户信息
 */
const getUserInfoData = () => {
  getUserInfo().then((res) => {
    if (res.code === 200) {
      if (res.data) {
        reorganizeData(res.data);
      }
    }
  });
};

/**
 * 替换头像
 */
const handleSuccess = (res) => {
  console.log('res', res);
  if (res.code === 200) {
    ElMessage({
      message: '上传成功',
      type: 'success',
    });
    form.avatar = res.data.path;
    props.getUserInfoData();
  } else {
    ElMessage({
      message: res.msg,
      type: 'error',
    });
  }
};

onMounted(() => {
  getUserInfoData();
});
</script>
<template>
  <div class="user-info">
    <div class="avatar-wrap">
      <el-avatar class="avatar" :src="avatar" :size="80"></el-avatar>
      <el-upload
        class="upload-demo"
        :show-file-list="false"
        :headers="{ 'mall-token': token }"
        :action="actionUrl"
        :on-success="handleSuccess"
      >
        <el-button type="primary">{{ $t('om.Interchangeability') }}</el-button>
      </el-upload>
    </div>
    <!-- 个人信息表单 -->
    <div class="form-wrap">
      <el-form :model="form" label-position="top" label-width="120px" :inline="true">
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('om.Usernickname')">
              <el-input v-model="form.name" size="large" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('om.Country')" size="large">
              <el-input v-model="form.nation" size="large" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('om.Cellphonenumber')">
              <el-input v-model="form.mobile" size="large" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('om.Inbox')">
              <el-input v-model="form.email" size="large" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('om.Sector')">
              <el-select v-model="value" placeholder="请选择行业" size="large">
                <el-option
                  v-for="item in industry"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('om.CompanyName')">
              <el-input v-model="form.companyName" size="large" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center" style="padding-top: 24px">
          <el-button type="primary" @click="onSubmit">{{ $t('om.Save') }}</el-button>
        </el-row>
      </el-form>
    </div>
  </div>
</template>
<style scoped lang="scss">
.user-info {
  .avatar-wrap {
    display: flex;
    align-items: center;
    .avatar {
      margin-right: 16px;
    }
  }

  .form-wrap {
    padding-top: 32px;
    padding-right: 380px;
    .el-form-item__content {
      .el-input,
      .el-select {
        width: 350px !important;
      }
    }
  }
}
</style>
